import { useAssistantStore } from '@/store/assistantStore'
import { Pencil2Icon } from '@radix-ui/react-icons'
import { Tooltip } from 'antd'
import { useMemo } from 'react'
import { ContentType } from './types'
import { getFileIconByFileName, getSpecificPluginResultMap } from './utils'

export default function MessageUser({ userName, data }: { userName: string; data: ContentType[] }) {
  // 需要assistant中的toolId状态来判断是否包含指定的插件
  const { assistantState } = useAssistantStore()
  const pluginStatusMap = getSpecificPluginResultMap(assistantState?.tool_list)

  // 当前支持，且仅支持输入一张图片,data最大长度为2，一条文本，一条图片
  const [msg, imageUrl, imageName, files] = useMemo(() => {
    if (!data.length) {
      return ['', '', '', []]
    }
    let msg = ''
    let imageUrl = ''
    let imageName = ''
    let files = []

    for (const item of data) {
      if (item.type === 'text') {
        msg = item.text
      } else if (item.type === 'image_url' && !imageUrl) {
        imageUrl = item.image_url?.url || ''
        imageName = item?.image_url?.name || ''
      } else if (item.type === 'file_url') {
        files.push({
          url: item.file_url?.url || '',
          name: item?.file_url?.name || '',
        })
      }
    }
    return [msg, imageUrl, imageName, files]
  }, [data])

  const handleResend = send => {
    const myEvent = new CustomEvent('userResendMsgEvent', {
      detail: {
        send,
        message: msg,
        imageUrl,
        imageName,
        files  // 修改为传递整个文件数组
      }
    })
    document.dispatchEvent(myEvent)
  }

  return (
    <div className="flex w-full justify-end py-1">
      <div className="w-fit max-w-[90%]">
        <div className="flex w-fit gap-[12px] justify-self-end">
          {userName && <span className="chat-role-name">{userName}</span>}
          <img src="/user.png" alt="" className="h-[24px] w-[24px]" />
        </div>
        <div className="mr-[30px] flex rounded-[12px] bg-[#E0E7FF] p-[16px] dark:bg-[#333A48]">
          <div className="chat-custom-content whitespace-break-spaces break-all text-sm text-[#0D1638] dark:text-[#CFD5E8]">
            {msg}
            {/* 测试 ==== 回显图片 */}
            {!!imageUrl && (
              <img
                src={imageUrl}
                style={{ width: '100px', height: '90px', borderRadius: '6px', marginTop: '10px' }}
                alt=""
              />
            )}
            {/* 测试 ==== 回显文件 */}
            {files.length > 0 && files.map((file, index) => (
              <div key={index} className="flexRowStart usr-file-file-box mt-1">
                <img src={getFileIconByFileName(file.name)} alt="" className="mr-[12px] h-[40px] w-[40px]" />
                <div className="relative">
                  <Tooltip title={file.name}>
                    <div className="usr-uploaded-file-filename">{file.name}</div>
                  </Tooltip>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 附加信息 */}
        {
          // 数组类型的 data通常是文件上传消息，不展示附加按钮
          <div className="mr-[32px] mt-2 flex justify-between ">
            <span></span>
            <div className="flex cursor-pointer gap-2 self-end text-gray-400">
              <Pencil2Icon className="hover:text-gray-500" onClick={() => handleResend(false)} />
            </div>
          </div>
        }
      </div>
    </div>
  )
}
